<script lang="ts" setup name="CheckoutAddress">
	import useStore from '@/store'
	import { storeToRefs } from 'pinia'
	import { ref, watch } from 'vue'
	import { CityResult } from '@/types/goods'
	import { UserAddress } from '@/types/checkout'
	import Message from '@/components/message'

	const { checkout } = useStore()
	const { showAddress, checkoutInfo } = storeToRefs(checkout)
	const dialogVisible = ref(false)

	// 定义一个表单的数据源
	const formDate = ref<UserAddress>({
		address: '',
		addressTags: '',
		cityCode: '', // 市
		contact: '',
		countyCode: '', // 区
		fullLocation: '',
		isDefault: 1,
		postalCode: '', // 邮编
		provinceCode: '', // 省
		receiver: '',
	} as UserAddress)

	const changeCity = (city: CityResult) => {
		// 保存地址信息
		formDate.value.provinceCode = city.provinceCode
		formDate.value.cityCode = city.cityCode
		formDate.value.countyCode = city.countyCode
		formDate.value.fullLocation = city.provinceName + ' ' + city.cityName + ' ' + city.countyName
	}

	// 提交收货地址的方法
	const confirm = async () => {
		// 处理两个逻辑：
		//  新增(id 为空) & 修改（ id 不为空）
		if (!formDate.value.id) {
			await checkout.addAddress(formDate.value)
		} else {
			await checkout.updateAddress(formDate.value)
		}
		// 关闭面板
		dialogVisible.value = false
		// 提示成功
		Message.success(formDate.value.id ? '修改收货地址成功' : '新增收货地址成功')
	}

	watch(dialogVisible, (value) => {
		if (!value) {
			// 重置表单数据
			formDate.value = {
				address: '',
				addressTags: '',
				cityCode: '', // 市
				contact: '',
				countyCode: '', // 区
				fullLocation: '',
				isDefault: 1,
				postalCode: '', // 邮编
				provinceCode: '', // 省
				receiver: '',
			} as UserAddress
		}
	})

	// 打开面板
	const openPanel = () => {
		dialogVisible.value = true
		// 将要修改的数据源保存到 formData 中, 拷贝数据问题
		formDate.value = {
			...checkout.showAddress!,
		}
	}

	const visible = ref(false)

	// 定义一个默认地址
	const selectAddress = ref<UserAddress>({} as UserAddress)
	// setTimeout(() => {
	// 	selectAddress.value = showAddress.value!
	// }, 1000)
	
	// 打开时显示默认地址
	watch(visible, (value) => {
		if (value) {
			selectAddress.value = showAddress.value!
		}
	})

	// 修改地址
	const changeAddress = async () => {
		// 将 isDefault 属性设置为 0
		selectAddress.value.isDefault = 0
		// 修改地址
		await checkout.updateAddress(selectAddress.value)
		Message.success('修改地址成功')
		// 关闭面板
		visible.value = false
	}
</script>

<template>
	<div class="checkout-address">
		<div class="text">
			<!-- <div class="none">您需要先添加收货地址才可提交订单。</div> -->
			<ul>
				<li>
					<span>收<i />货<i />人：</span>{{ showAddress?.receiver }}
				</li>
				<li><span>联系方式：</span>{{ showAddress?.contact }}</li>
				<li><span>收货地址：</span>{{ showAddress?.fullLocation + '' + showAddress?.address }}</li>
			</ul>
			<a href="javascript:;" @click="openPanel">修改地址</a>
		</div>
		<div class="action">
			<XtxButton class="btn" @click="visible = true">切换地址</XtxButton>
			<XtxButton class="btn" @click="dialogVisible = true">添加地址</XtxButton>
		</div>
		<XtxDialog title="添加收货地址" v-model:visible="dialogVisible">
			<div class="xtx-form">
				<div class="xtx-form-item">
					<div class="label">收货人：</div>
					<div class="field">
						<input v-model="formDate.receiver" class="input" placeholder="请输入收货人" />
					</div>
				</div>
				<div class="xtx-form-item">
					<div class="label">手机号：</div>
					<div class="field">
						<input v-model="formDate.contact" class="input" placeholder="请输入手机号" />
					</div>
				</div>
				<div class="xtx-form-item">
					<div class="label">地区：</div>
					<div class="field">
						<XtxCity
							:user-adress="formDate.fullLocation"
							@changeCity="changeCity"
							placeholder="请选择所在地区"
						/>
					</div>
				</div>
				<div class="xtx-form-item">
					<div class="label">详细地址：</div>
					<div class="field">
						<input v-model="formDate.address" class="input" placeholder="请输入详细地址" />
					</div>
				</div>
				<div class="xtx-form-item">
					<div class="label">邮政编码：</div>
					<div class="field">
						<input v-model="formDate.postalCode" class="input" placeholder="请输入邮政编码" />
					</div>
				</div>
				<div class="xtx-form-item">
					<div class="label">地址标签：</div>
					<div class="field">
						<input
							v-model="formDate.addressTags"
							class="input"
							placeholder="请输入地址标签，逗号分隔"
						/>
					</div>
				</div>
			</div>
			<template #footer>
				<XtxButton type="gray" style="margin-right: 20px" @click="dialogVisible = false"
					>取消</XtxButton
				>
				<XtxButton type="primary" @click="confirm">确认</XtxButton>
			</template>
		</XtxDialog>
		<XtxDialog title="切换收货地址" v-model:visible="visible">
			<template #default>
				<div
					class="text item"
					v-for="item in checkoutInfo.userAddresses"
					:key="item.id"
					@click="selectAddress = item"
					:class="{ active: selectAddress?.id === item.id }"
				>
					<ul>
						<li>
							<span>收<i />货<i />人：</span>{{ item.receiver }}
						</li>
						<li><span>联系方式：</span>{{ item.contact }}</li>
						<li><span>收货地址：</span>{{ item.fullLocation.replace(/ /g, '') + item.address }}</li>
					</ul>
				</div>
			</template>
			<template #footer>
				<XtxButton type="gray" style="margin-right: 20px" @click="visible = false">
					取消
				</XtxButton>
				<XtxButton type="primary" @click="changeAddress">确认</XtxButton>
			</template>
		</XtxDialog>
	</div>
</template>

<style scoped lang="less">
	.checkout-address {
		border: 1px solid #f5f5f5;
		display: flex;
		align-items: center;
		.text {
			flex: 1;
			min-height: 90px;
			display: flex;
			align-items: center;
			&.item {
				border: 1px solid #f5f5f5;
				margin-bottom: 10px;
				cursor: pointer;
				&.active,
				&:hover {
					border-color: @xtxColor;
					background: lighten(@xtxColor, 50%);
				}
				> ul {
					padding: 10px;
					font-size: 14px;
				}
			}
			.none {
				line-height: 90px;
				color: #999;
				text-align: center;
				width: 100%;
			}
			> ul {
				flex: 1;
				padding: 20px;
				li {
					line-height: 30px;
					span {
						color: #999;
						margin-right: 5px;
						> i {
							width: 0.5em;
							display: inline-block;
						}
					}
				}
			}
			> a {
				color: @xtxColor;
				width: 160px;
				text-align: center;
				height: 90px;
				line-height: 90px;
				border-right: 1px solid #f5f5f5;
			}
		}
		.action {
			width: 420px;
			text-align: center;
			.btn {
				width: 140px;
				height: 46px;
				line-height: 44px;
				font-size: 14px;
				&:first-child {
					margin-right: 10px;
				}
			}
		}
	}

	.xtx-dialog {
		:deep(.wrapper) {
			width: 780px;
			.body {
				font-size: 14px;
			}
		}
	}
	.xtx-form {
		padding: 0;
		input {
			outline: none;
			&::placeholder {
				color: #ccc;
			}
		}
	}
	.xtx-city {
		width: 320px;
		:deep(.select) {
			height: 50px;
			line-height: 48px;
			display: flex;
			padding: 0 10px;
			justify-content: space-between;
			.placeholder {
				color: #ccc;
			}
			i {
				color: #ccc;
				font-size: 18px;
			}
			.value {
				font-size: 14px;
			}
		}
		:deep(.option) {
			top: 49px;
		}
	}
</style>
